<%--
  Created by IntelliJ IDEA.
  User: caidao
  Date: 2023/4/17
  Time: 08:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="/WEB-INF/include/bootstrapHeader.jsp"/>
    <link rel="stylesheet" href="<c:url value="/css/main.css"/>"/>
</head>
<body class="d-flex flex-column h-100">
    <jsp:include page="/WEB-INF/include/pageHeader.jsp"/>

    <main class="flex-shrink-0">
        <div class="container">
            <h1 class="mt-5">消费记录(编辑)</h1>
            <form class="row g-3 needs-validation" method="post" action="<c:url value="/paid/update"/>" novalidate>
                <input type="hidden" id="id" name="id" value="${model.id}"/>
                <div class="col-md-6">
                    <label for="paidname" class="form-label">商品名称</label>
                    <input type="text" class="form-control" id="paidname" name="paidname" value="<c:out value="${model.paidname}"/>" required>
                    <div class="valid-feedback">
                        验证通过
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="paidtype" class="form-label">支出类型</label>
                    <select class="form-control" id="paidtype" name="paidtype" required>
                        <option disabled selected value="">请选择...</option>
                        <c:forEach var="paidType" items="${paidtypes}">
                            <option value="${paidType.typename}" <c:if test="${paidType.typename == model.paidtype}">selected</c:if>>
                                <c:out value="${paidType.typename}"/>
                            </option>
                        </c:forEach>
                    </select>
                    <div class="valid-feedback">
                        验证通过
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="paiddate" class="form-label">支出时间</label>
                    <input type="datetime-local" class="form-control" id="paiddate" name="paiddate" value="<fmt:formatDate value="${model.paiddate}" pattern="yyyy-MM-dd HH:mm"/>" required>
                    <div class="valid-feedback">
                        验证通过
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="amountpaid" class="form-label">支出金额</label>
                    <input type="number" class="form-control" id="amountpaid" name="amountpaid" value="${model.amountpaid}" min="0.50" max="10000.00" step="0.50" required>
                    <div class="invalid-feedback">
                        金额不能为负值，范围：0.50 - 10000.00
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="remark" class="form-label">注备</label>
                    <input type="text" class="form-control" id="remark" name="remark" value="${model.remark}">
                </div>
                <div class="col-12">
                    <button class="btn btn-primary" type="submit">提交</button>
                    <a class="btn btn-primary" href="<c:url value="/paid/list"/>">返回</a>
                </div>
            </form>
            <script>
                // Example starter JavaScript for disabling form submissions if there are invalid fields
                (() => {
                    'use strict'

                    // Fetch all the forms we want to apply custom Bootstrap validation styles to
                    const forms = document.querySelectorAll('.needs-validation')

                    // Loop over them and prevent submission
                    Array.from(forms).forEach(form => {
                        form.addEventListener('submit', event => {
                            if (!form.checkValidity()) {
                                event.preventDefault()
                                event.stopPropagation()
                            }

                            form.classList.add('was-validated')
                        }, false)
                    })
                })()
            </script>
        </div>
    </main>
    <jsp:include page="/WEB-INF/include/pageFooter.jsp"/>
</body>
</html>
